<template>
  <Modal v-model="showResourceModel"
         :footer-hide="true"
         :closable="true"
         title="添加资源"
  >
    <Form ref="addForm" :model="resource" label-position="left"
          :label-width="100" :rules="rules"
          @keydown.enter.native="formSubmit">
      <FormItem label="资源名称" prop="roleName">
        <Input v-model="resource.resourceName" type="text"></Input>
      </FormItem>
      <FormItem label="资源类型" prop="description">
        <Select v-model="resource.resourceType">
          <Option value="菜单">菜单</Option>
          <Option value="按钮">按钮</Option>
          <Option value="页面">页面</Option>
          <Option value="图片">图片</Option>
          <Option value="其他资源">其他资源</Option>
        </Select>
      </FormItem>
      <FormItem label="资源路径" prop="roleCode">
        <Input v-model="resource.resourceUrl" type="text"></Input>
      </FormItem>
      <FormItem label="请求方式" prop="description">
        <Select v-model="resource.resourceMethod">
          <Option value="GET">GET</Option>
          <Option value="PUT">PUT</Option>
          <Option value="POST">POST</Option>
          <Option value="DELETE">DELETE</Option>
          <Option value="ALL">ALL</Option>
        </Select>
      </FormItem>
      <FormItem label="父级资源" prop="description">
        <Select v-model="resource.parent">
          <Option v-for="i in resourceList" :value="i.id">{{ i.resourceName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="启用状态" prop="status">
        <RadioGroup  type="button" v-model="resource.status">
          <Radio label="Enable" value="200">启用</Radio>
          <Radio label="Disable" value="500">禁用</Radio>
          <Radio label="Lock" value="400">锁定</Radio>
          <Radio label="Unlock" value="402">解除锁定</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem class="right">
        <Button type="primary" class="rapper" @click="formSubmit">确定</Button>
        <Button type="info" class="rapper" @click="formCancel">取消</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import {addResource, getResourceTableData} from "@/api/data";

export default {
  name: "AddResource",
  data() {
    return {
      resource: {
        resourceName: '',
        resourceUrl: '',
        resourceType: '',
        resourceMethod: '',
        parent:'',
        status:''
      },
      resourceList:[],
      showResourceModel: false
    }
  },
  props: {
    resourceNameRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请输入资源名称', trigger: 'blur'}

        ]
      }
    },
    resourceUrlRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请输入资源路径', trigger: 'blur'}
        ]
      }
    },
    resourceTypeRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请选择资源类型', trigger: 'blur'}
        ]
      }
    },
    // parentRules: {
    //   type: Array,
    //   default: () => {
    //     return [
    //       {required: true, message: '请选择父级资源', trigger: 'change',type:'number'}
    //     ]
    //   }
    // },
    statusRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请勾选状态', trigger: 'blur'}
        ]
      }
    },
    resourceMethodRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请选择请求方法', trigger: 'blur'}
        ]
      }
    },
  },
  computed: {
    rules() {
      return {
        resourceName: this.resourceNameRules,
        resourceUrl: this.resourceUrlRules,
        resourceType: this.resourceTypeRules,
        resourceMethod:this.resourceMethodRules,
        parent:this.parentRules,
        status:this.statusRules
      }
    }
  },
  methods: {
    showModal(){
      this.showResourceModel = true;
    },
    formSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addResource(this.resource).then(res => {
            let data = res.data;
            if (data && data.code === 200) {
              this.$emit("refresh");
              this.getAllResource();
              this.$Message.success("添加成功！");
            } else {
              this.$Message.error(data.message);
            }
            this.showResourceModel = false
          })
        }
      });
    },
    formCancel() {
      this.showResourceModel = false
      this.$Message.info("取消添加用户！");
    },
    getAllResource(){
      getResourceTableData().then(res => {
        let data = res.data;
        if (data && data.code === 200) {
          this.resourceList = data.object;
        } else {
          this.$Message.error(data.message);
          this.showResourceModel = false
        }
      })
      this.resourceList.push({id:-1,permissionName: "顶级"});
    }
  },
  mounted() {
    this.getAllResource();
  }
}
</script>

<style scoped>
.right {
  text-align: right
}

.rapper {
  margin: 0 2px;
}
</style>
